<template>
  <view class="page">
	<theme-navbar
	  :is-white="false" backText="返回" :title="navTitle" :custom-back="goBack">
	</theme-navbar>

	<view class="content-list" style="padding-bottom: 160rpx;">
	  <me-table :i="0" :top="0" :index="0" :load-data="loadData" :init-load="false" ref="mescrollItem0">
		<view class="re-list" slot-scope="d" @click="handleRetailerClick(d.data)">
		  <view class="re-content">
			<view class="re-manager">
			  <text class="re-title">
				{{ d.data.companyName }}
			  </text>
			  <u-tag style="flex-shrink: 0; height: fit-content" :spStyle="getSpStyle(d.data)" v-if="d.data.licStatus"
				mode="dark" shape="circle" :text="d.data.licStatusName"></u-tag>
			  <text class="re-tit"></text>
			</view>
			<view class="re-subtitle">
			  {{ d.data.businessAddr }}
			</view>
			<view class="re-icon">
			  <u-row>
				<u-col span="6" style="padding-left: 0px">
				  <u-icon :label="d.data.managerName || ''" size="30" name="/static/check/manager.png"></u-icon>
				</u-col>
				<u-col span="6">
				  <u-icon :label="d.data.retailTel || ''" size="30" name="phone"></u-icon>
				</u-col>
			  </u-row>
			</view>
			
			<view v-if="selectArr.find(item => item.retailerUuid == d.data.retailerUuid)" class="check-icon">
				<u-icon name="checkbox-mark" :color="$theme.u_type_primary" size="38" style="margin-right: 10px;"></u-icon>
			</view>
		  </view>
		</view>
	  </me-table>
	</view>
	
	
	<!-- 底部按钮 -->
	<view class="submit-btns btn-other-cls">
		<u-button class="u-btn" type="primary" @click="handlerSure">
			确定
		</u-button>
	</view>
	
  </view>
</template>

<script>
import MeTable from '@/components/me-table.vue';
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import queryService from '@/service/check/query.service';
import { L_LIC_STATUS, } from '@/service/query/mapping/enum.js';

const sysCodeColors = {
  '07': {
    color: '#EC7C37',
    borderColor: '#EC7C37',
    backgroundColor: '#FBE2D3',
  },
  '04': {
    color: '#01A79A',
    borderColor: '#01A79A',
    backgroundColor: '#C0ECE2',
  },
  '01': {
    color: '#AC0000',
    borderColor: '#AC0000',
    backgroundColor: '#F2CCCC',
  },
  '06': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
  '08': {
    color: '#0079F2',
    borderColor: '#0079F2',
    backgroundColor: '#E0ECFF',
  },
  '02': {
    color: '#717579',
    borderColor: '#717579',
    backgroundColor: '#EDEEEF',
  },
  '05': {
    color: '#20AB5C',
    borderColor: '#20AB5C',
    backgroundColor: '#DBF4E6',
  },
  '03': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
};

export default {
	components: {
	  MeTable,
	},
	mixins: [MescrollMoreMixin],
    data() {
        return {
			keyword: '',
			tels: [],
			user: this.$storage.get(this.$rp.common.USER),
			selectArr: [], // 选中的零售户
			isMultiple: false, // 是否多选，默认单选
        }
    },
	onLoad(option) {
		this.isMultiple = option.isMultiple && option.isMultiple == 1;
	},
    methods: {
		handlerSearch() {
		  if (this.$u.test.isEmpty(this.keyword)) {
		    this.$u.toast('请输入关键字');
		    return;
		  }
		  this.$refs['mescrollItem0'].refresh();
		},
		getSpStyle(it) {
		  if (it.licStatus == L_LIC_STATUS.SHUT_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.ORDER_SHUT_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.CANCEL_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.CLOSE_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.WITHDRAW_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.REVOKE_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.RECALL_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  } else if (it.licStatus == L_LIC_STATUS.NORMAL_STATUS) {
		    return sysCodeColors[it.licStatus] || {};
		  }
		},
		// 零售户列表数据查询
		loadData(page) {
		  const orgUuid = this.user.orgUuid || ''
		  if (!orgUuid) {
		    return this.$u.toast('组织信息获取异常')
		  }
		  let param = {
		    keyWord: this.keyword,
		    orgUuid: orgUuid
		  };
		  return new Promise((resolve) => {
			queryService.unlicenseList(page.num, page.size, param)
		        .then((res) => {
		          if (res.success) {
		            resolve({
		              count: res.count,
		              data: [...res.data,],
		            });
		          } else {
		            resolve({
		              count: 0,
		              data: [],
		            });
		          }
		        })
		        .catch((e) => {
		          resolve({
		            count: 0,
		            data: [],
		          });
		        });
		  });
		},
		handleRetailerClick(data) {
			if (!this.isMultiple) {
				this.selectArr = [data];
				return;
			}
			if (!!this.selectArr.find(item => item.retailerUuid == data.retailerUuid)) {
				this.selectArr = this.selectArr.filter(item => item.retailerUuid != data.retailerUuid);
			} else {
				this.selectArr.push(data);
			}
		},
		handlerSure() {
			if (!this.selectArr.length) {
				this.$u.toast("请选择零售户!");
				return;
			}
			this.backPrev({
				paramKey: 'selectRetailer',
				param: this.selectArr,
			});
		}
    }
}
</script>

<style lang="scss" scoped>
@import 'style/certificate/common.scss';

.page {
  padding: 0;
}

.search-right-icon {
  display: flex;
  position: absolute;
  right: 10%;
}

.u-search-btn {
  height: 44px;
  line-height: 44px;
  // padding: 0 10px;
  display: flex;
  align-items: center;
  margin: 0 20rpx;

  .u-confirm-btn {
    height: 32px;
    margin-left: 10px;
  }
}

.content-list {
  background-color: #f3f4f5;
}

.nolicence-search-lay {
  background-color: #fff;
  position: fixed;
  // #ifndef H5-DINGDING
  top: 44px;
  // #endif
  // #ifdef H5-DINGDING
  top: 0px;
  // #endif
  z-index: 999;
  width: 100%;
  overflow: hidden;
  padding: $cm-search-padding-row $cm-search-padding-column;
}

.re-list {
	position: relative;
  margin: 20rpx;
  color: #666666;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  -webkit-flex-direction: row;
  background-color: #fff;
  border-radius: 12px;
  padding: 12px;
}

.re-media {
  padding-right: 10px;
  vertical-align: middle;
}

.re-content {
  width: 100%;

  .re-manager {
    display: flex;
    justify-content: space-between;

    .re-title {
      width: calc(90%);
      font-size: 15px;
      color: #666;
      font-weight: 600;
      margin-bottom: 5px;
      width: 80%;
    }
  }

  .re-subtitle {
    padding-top: 5px;
    color: #666;
  }

  .re-icon {
    display: flex;
    padding-top: 10px;
  }
}

.check-icon {
	position: absolute;
	right: 30rpx;
	top: 100rpx;
}

/deep/.u-line {
  flex-shrink: 0;
}
</style>